<template>
  <div>
    <div style="width: 700px;margin: 0 auto;">
      <el-card class="box-card" shadow="hover" style="border-bottom: none">
        <div class="clearfix" style="text-align: center">
          <span>{{ blog.title }}</span>
        </div>
        <div v-html="blog.content" style=""></div>
        <div v-show="blog.isAppreciation===true">
          <el-button style="display:block;margin:0 auto" round @click="dialogVisible = true">赞赏</el-button>
        </div>
      </el-card>
      <el-dialog
        title="一毛也是爱"
        :visible.sync="dialogVisible"
        width="16%"
        center
        modal
        :show-close="false"
        @open="openAppreciation()"
        @close="closeAppreciation()"
      >
        <img src="../../assets/img/skm.jpg" alt="" style="width: 200px;height: 200px">


      </el-dialog>
      <Comment></Comment>
    </div>
  </div>
</template>

<script>
import NProgress from 'nprogress'
import Comment from "@/components/comment/Comment";

export default {
  name: "BlogDetail",
  data() {
    return {
      blog: {},
      dialogVisible: false
    }
  },
  components: {
    Comment
  },
  methods: {
    getBlog() {
      NProgress.start();
      const id = this.$route.params.id;
      this.$http({
        url: `blog/${id}`
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.blog = data.data;
          console.log("博客：" + this.blog)
          NProgress.done();
        }
      })
    },
    openAppreciation() {
      this.blog.isAppreciation = false;
    },
    closeAppreciation() {
      this.blog.isAppreciation = true;

    }
  },
  mounted() {
    this.getBlog();
  },
  watch: {
    //如果路由有变化，会执行该方法
    $route: {
      handler: function () {
        if (this.$route.params.id != null) {
          this.getBlog()
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);

  .el-dialog__body {
    padding: 30px 25px;
    height: 800px;
    flex: 1;
    overflow: auto;
  }
}

</style>
